<template>
  <div>
    <div class="main-head has-radios flex-between container-fluid">
      <div class="title">
        <h1>{{ $t('pro.reports.reportsName') }}
          <small v-show="$route.params.type != 'index'">{{`${$route.params.type} & ${$route.params.id}`}} </small>
        </h1>
      </div>
      <a-radio-group v-model="rdChecked" buttonStyle="solid" @change="handleCheckedChange">
        <a-spin :spinning="spinningDate" class="dsp-spin">
            <a-radio-button
              v-for="(value,key) in radios"
              :key="key"
              :value="value[0]"
            >{{value[1]}}</a-radio-button>
        </a-spin>
      </a-radio-group>

    </div>

    <div class="content container-fluid">
      <div class="portlet">
        <div class="tools text-right">
          <!-- 日期时间 -->
          <a-range-picker
            :allowClear="false"
            style="width: 375px;"
            :defaultValue="[$moment(datePickerDefaultValue[0], dateFormat),$moment(datePickerDefaultValue[1], dateFormat)]"
            :format="dateFormat"
            @change="handleDatePickerChange"
            showToday
            v-show="showDatePicker"
            @openChange="openChange"
          />
        </div>

        <!-- 图表去区域 -->
        <div>
          <a-spin :spinning="loading">
            <!-- 控制显示图表 -->
              <div class="e-chart">
                <a-icon type="bell" class="icon-bell" @click="openModel" />
                <!-- 图表组件 -->
                <!--<e-charts :org-options="orgOptions"></e-charts>-->
                <e-charts :date-stage="date"></e-charts>
              </div>
          </a-spin>
          <add-alert :alert-id='alertId' :modal-config="visibleConfig"></add-alert>
        </div>
      </div>
    </div>

    <report-list :date-stage="date"></report-list>
  </div>
</template>

<script>
import eCharts from '../../components/common/echarts/eCharts'
import reportList from '../../components/common/custom/ReportList'
import addAlert from '../../components/common/custom/ModelAddAlert'

export default {
  components:{
      eCharts,
      reportList,
      addAlert
    },

  data() {
    return {
      rdChecked: 'getThisWeek',
      rdCheckedWithoutCustom: '',
      dateFormat: 'YYYY-MM-DD',
      showDatePicker: false,
      loading: false,
      alertId:null,
      visibleConfig: {
          visibleModal: false,
      },
      spinningDate: false,
      selectData: [],
      date: {
          time: 'getThisWeek'
      },
    }
  },
  

  methods: {
      openModel(){
          this.alertId = null
          this.visibleConfig.visibleModal = true;
      },
      /* 时间筛选 */
      handleDatePickerChange(value, mode) {
          this.selectData = mode;
      },
      openChange(status) {
          
          this.$nextTick(() => {
              if (!status) {
                  this.spinningDate = true;
                  setTimeout(() => {
                      this.spinningDate = false
                      this.date.time = this.rdChecked;
                      this.date.start = (this.selectData[0] || new Date().toJSON().substring(0, 10)) + ' 00:00:00';
                      this.date.end = (this.selectData[1] || new Date().toJSON().substring(0, 10)) + ' 23:59:59';
                      console.log(status);
                  }, 500)

              }
          })
      },
      // 应在 handleCheckedChange && handleDatePickerChange 分别执行查询相关的数据的请求操作
      handleCheckedChange() {
        this.showDatePicker = this.rdChecked === 'getCustom';
        // 实现显示日期筛选
        if (this.showDatePicker) {
            this.rdCheckedWithoutCustom = this.rdChecked;
        }else {
            this.date.time = this.rdChecked;
            delete this.date.start;
            delete this.date.end;
            this.spinningDate = true;
            setTimeout(() => {
                this.spinningDate = false
            }, 500)
        }
       },
  },

  computed: {
    radios() { return new Map(this.$t('pro.public.radiosDate')) },

    // 用户需自定义日期期限时，DatePicker的默认值
    datePickerDefaultValue() {
        const firstday = this.$moment().startOf(this.rdCheckedWithoutCustom)
        const lastday = this.$moment().endOf(this.rdCheckedWithoutCustom)
        return [firstday,lastday]
    },

  },

  created() {
      //指定默认日期
      this.rdCheckedWithoutCustom = this.rdChecked
  },

}
</script>

<style lang="less">
.e-chart{
  width: 100%;height: auto;position: relative;
  .icon-bell{
    font-size: 2rem;color: @primary-color;position: absolute;right: 1.8rem;top: 3rem;cursor: pointer;z-index: 999;
  }
  margin-bottom: -5px;
}

</style>

